<template>
  <!-- <p>click {{counterStore.count}} times, count is {{counterStore.evenOrOdd}}</p> -->
  <p>click {{count}} times, count is {{evenOrOdd}}</p>
</template>

<script lang="ts">
  export default {
    name: 'CounterShow'
  }
</script>
<script lang="ts" setup>
  import { storeToRefs } from 'pinia';
import {useCounterStore} from '../../stores/counter'

  const counterStore = useCounterStore()

  // 错误写法
  // const count = counterStore.count
  // const evenOrOdd = counterStore.evenOrOdd
  // 正确写法
  const {count, evenOrOdd} = storeToRefs(counterStore)
</script>

<style scoped>

</style>
